﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css.css" rel="stylesheet" type="text/css" />
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://res.banshiyi.com/static/js/area.js" type="text/javascript"></script>
    <script src="js.js" type="text/javascript"></script>
    <style type="text/css">
        body
        {
            width: 90%;
            margin: 0 auto;
        }
        .code
        {
            border: 1px solid #ddd;
            background-color: #f8f8f8;
            padding: 5px;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        function cancelClick() {
            alert('cancelClick');
        }
        function okClick() {
            alert('okClick');
        }
    </script>
    <h1>
        bensie.js组件演示</h1>
    <h3>
        1、bensie.alert()方法，用于弹出消息</h3>
    <pre class="code">
        示例：bensie.alert({message:'提示消息，支持HTML'})</pre>
    <pre class="code">
        参数
        1、title: 标题
        2、message: 消息内容，支持HTML
        3、btnOkText：确定按钮的文本内容
        4、onOkClick：当点击确定按钮时执行的js方法
    </pre>
    <p>
        <input type="button" onclick="bensie.alert({ title:'消息标题', message:'提示消息内容1、你错了2、你没错吗？', onOkClick:okClick})"
            value="弹出消息" /></p>
    <hr />
    <h3>
        2、bensie.confirm()方法，用于弹出确认</h3>
    <pre class="code">
        示例：bensie.confirm({message:'提示消息，支持HTML',onOkClick:okClick})</pre>
    <pre class="code">
        参数，除id参数外，其他所有参数均为可选
        1、title: 标题
        2、message: 消息内容，支持HTML
        3、btnOkText：确定按钮的文本内容
        4、onOkClick：当点击取消按钮时执行的js方法
        5、btnCancelText：确定按钮的文本内容
        6、onCancelClick：当点击取消按钮时执行的js方法
    </pre>
    <p>
        <input type="button" onclick="bensie.confirm({ title:'消息标题', message:'提示消息内容1、你错了2、你没错吗？', onOkClick:okClick})"
            value="弹出confirm" /></p>
    <hr />
    <h3>
        3、bensie.popup()方法，用于弹出指定的元素</h3>
    <pre class="code">
        示例：bensie.popup({message:'提示消息，支持HTML',onOkClick:okClick})</pre>
    <pre class="code">
        参数,所有参数均为可选
        1、id: 将被弹出HTML元素的id
        2、title: 标题
        3、btnOkText：确定按钮的文本内容
        4、onOkClick：当点击取消按钮时执行的js方法
        5、btnCancelText：确定按钮的文本内容
        6、onCancelClick：当点击取消按钮时执行的js方法
        * 需调用bensie.popup.close();手动关闭
    </pre>
    <div id="divForPopup" style="display: none">
        <p>
            请输入你的账号信息</p>
        <p>
            用户：<input /></p>
        <p>
            手机：<input /></p>
        <p>
            密码：<input /></p>
        <p>
            <input type="button" onclick="bensie.close()" value="关闭" /></p>
    </div>
    <p>
        <input type="button" onclick="bensie.popup({ id:'divForPopup', title:'消息标题', onOkClick:okClick})"
            value="弹出popup" />
    </p>
    <hr />
    <h3>
        4、bensie.areaSelector()方法，用于选择地区</h3>
    <pre class="code">
        示例：bensie.areaSelector({init:{editMode:true, provinceId: 19, cityId: 202, districtId:
        1787, townId: 2}, title:'选择地区', onOkClick:onAreaSelected})</pre>
    <pre class="code">
        参数，所有参数均为可选，需要引用area.js文件

        1、title: 标题
        2、init: { editMode: false, provinceId: -1, cityId: -1, districtId: -1, townId: -1 } 初始化，editMode:是否为编辑模式
        3、btnOkText：确定按钮的文本内容
        4、onOkClick：当点击取消按钮时执行的js方法，回传数据json，provinceId，cityId，districtId和townId
        5、btnCancelText：确定按钮的文本内容
        6、onCancelClick：当点击取消按钮时执行的js方法
    </pre>
    <p>
        <script type="text/javascript">
            function onAreaSelected(data) {//data就是点击确定后的数据
                var provinceId = data.provinceId;
                var cityId = data.cityId;
                var districtId = data.districtId;
                var townId = data.townId;
                alert('你选择了：provinceId:' + provinceId + '|cityId:' + cityId + '|districtId:' + districtId + '|townId:' + townId);
            }
        </script>
        <input type="button" onclick="bensie.areaSelector({init:{editMode:true, provinceId: 19, cityId: 202, districtId: 1787, townId: 2}, title:'选择地区', onOkClick:onAreaSelected})"
            value="弹出地区选择(有默认值)" />
        <input type="button" onclick="bensie.areaSelector({title:'选择地区', onOkClick:onAreaSelected})"
            value="弹出地区选择(无默认值)" />
    </p>
    <hr />
    <h3>
        5、bensie.loadMore()方法，用于Ajax异步加载数据</h3>
    <pre class="code">
<br />
        1、场景一：首次加载由asp.net后台代码生成第一页的数据，从第二页开始，由loadMore方法处理。这种方式使用UCLoadMore.ascx，参数全在asp.net后台代码完成。
        2、场景二：首次加载使用loadMore去加载第一页的数据。这种方式手动在前使用bensie.loadMore({})方法，数据在asp.net后台代码完成。
        </pre>
    <p>
        场景一</p>
    <pre class="code">
        1)、先把UcLoadMore.ascx控件拖放到页面合适的位置，此时VS IDE会自动为它分配一个ID对象UcLoadMore1，如：

        &lt;div id="bensie-data-list" class="list-panel"&gt;        
        &ltasp:Literal runat="server" ID="ltlDataList"&gt; &lt;/asp:Literal&gt;        
        &lt;/div&gt;
        &lt;uc1:UcLoadMore ID="UcLoadMore1" runat="server" /&gt;
    </pre>
    <pre class="code">
        2)、为对象UcLoadMore1设置参数
        string appId = "10020";
        string type = "2";
        Dictionary&lt;string, object&gt; param = new Dictionary&lt;string, object&gt;();        
        param.Add("appId", appId); //自身业务参数示例
        param.Add("type", type);//自身业务参数示例
        UcLoadMore1.Params = param;//设置参数集

        UcLoadMore1.NoRecordTip = "没有符合条件的运动场";//没有记录时显示的内容        
        UcLoadMore1.HandlerUrl = "ListPageDemo.aspx";//指定用于异步返回数据的页面
        UcLoadMore1.ActionType = "Merchants";//动作类型，用于判断执行哪个函数，例如ListPage.aspx需处理多个动作
        UcLoadMore1.RecordCount = recordCount;//记录总数
        UcLoadMore1.PageSize = pageSize;//每页显示的记录数
    </pre>
    <pre class="code">
        3)、实现返回数据        
        void AjaxResponse()
        {
            int appId = ReqHelper.GetIntValue("appId");        
            int pageIndex = ReqHelper.GetIntValue("pageIndex");
            int pageSize = ReqHelper.GetIntValue("pageSize");
            int recordCount = 0;
            var list = _merchantService.GetAllBy(appId, pageIndex, pageSize, ref recordCount).ToList();
            ResponseForAjaxRequest(this.GetHtmlByList(list));
        }
    </pre>
    <pre class="code">
        4)、调用示例
        protected void Page_Load(object sender, EventArgs e)
        {
            if (IsAjaxRequest())
            {
                AjaxResponse();//在此处调用
            }
            else if (!IsPostBack)        
            {
                PageInit();//无关业务
                BindList();//无关业务
            }
        }
    </pre>
    <p>
        场景二</p>
    <pre class="code">
    
        function myChange(o) {
            $('#bensie-load-more').hide();
            bensie.loadMore({ params: { v: o.value }, url: 'LoadMoreDemo.aspx', pageIndex: 1 });//自定义加载必须把pageIndex设为1，否则会引用之前的
        }
    </pre>
    <pre class="code">
        附：所有js参数
<br />
        { id: 'bensie-data-list', url: '', params: {}, actionType: '', pageIndex: 0, pageSize: 20, noRecordTip: '暂无相关记录！', success: function () { } }
        url:接受返回数据的页面路径
        actionType:命令名称，非必填，用户根据自己的需要使用
        params:参数列表，json格式，如：params:{"name":"jhon", "age":12}
        pageIndex: 如果指定，例选择select控件，以ajax的方法返回查询结果，则需要把它设为1，一般调用时不要设置此参数。
        pageSize:每页显示的记录数
        success:执行成功之后处理的回调方法
        </pre>
    <hr />
    <h3>
        6、bensie.request()方法，用于从URL中参数指定的参数</h3>
    <pre class="code">
        例如当url为：http://www.test.com?kw=test&v=20

        &lt;script type="text/javascript"&gt;
            var kw = bensie.request('ke');
            alert(kw); //弹出：test
        &lt;/script&gt;
        </pre>
    <hr />
    <h3>
        7、bensie.loading.show({message:'处理中，请稍候……'})和bensie.loading.close()用于显示和关闭loading</h3>
    <pre class="code">
        附：所有js参数
        message:提示信息
        timeOut:自动关闭时间（毫秒）
    </pre>
    <pre class="code">
    bensie.loading.show();//默认bensie.loading.show({message:'处理中，请稍候……'});
    bensie.loading.close();//关闭
    </pre>
    <input type="button" value="显示loading" onclick="bensie.loading.show({timeOut:2000})" />
    <input type="button" value="关闭loading" onclick="bensie.loading.close()" />
    <hr />
    <h3>
        8、bensie.scanWxQRCode(cancel: function () { }, success: function (data) { }, fail:
        function () { }, error: function (ex) { })方法，用于调用微信的微二维功能</h3>
    <pre class="code">
        附：所有js参数
        cancel: 取消扫码时执行
        success:扫码成功时执行
        fail:   扫码失败时执行
        error： 扫码错误时执行
    </pre>
    <pre class="code">

    function scanWxQRCode() {
        var redirectUrl = 'CheckIn.aspx';
        bensie.scanWxQRCode({
        cancel: function () {
            window.location.href = redirectUrl;
        },
        success: function (scanResult) {
            window.location.href = 'CheckInDetail.aspx?ReservedNo=' + scanResult;
        },
        fail: function () {
            window.location.href = redirectUrl;
        },
        error: function () {
            alert('打开扫码功能失败！');
            window.location.href = redirectUrl;
        }
    });
}
        </pre>
    <hr />
</body>
</html>
